<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script type="text/javascript" src="../js/vue.js"></script>
    <script type="text/javascript" src="../js/axios.min.js"></script>
    <script type="text/javascript" src="../js/vue-router.js"></script>
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <script type="text/javascript" src="../js/bootstrap.min.js"></script>
    <link type="text/css" rel="stylesheet" href="../css/bootstrap.min.css">
    <link type="text/css" rel="stylesheet" href="../css/animate.css">
</head>

<body>
    <div class="container">
        <div id="app">

            <input-comp @add-comment="addComment"></input-comp>
            <ul class="list-group">
                <li class="list-group-item" v-for="item in list" :key="item.user">
                    <span class="badge">{{item.user}}</span>
                    <span class="badge">{{item.id}}</span> {{item.content}}
                </li>
            </ul>

        </div>


        <template id="inputTemp">
            <div>
                <form class="form-inline">
                    <div class="form-group">
                        <label for="inputName">姓名</label>
                        <input type="text" class="form-control" id="inputName" placeholder="输入姓名" v-model="user">
                    </div>
                    <div class="form-group">
                        <label for="inputContent">语录</label>
                        <input type="text" class="form-control" id="inputContent" placeholder="输入语录" v-model="content">
                    </div>
                    <button class="btn btn-default" @click="addContent">添加</button>
                </form>
            </div>
        </template>
    </div>
    <script>
        var inputComp = {
            template: '#inputTemp',
            data() {
                return {
                    user: '',
                    content: ''
                }
            },
            methods: {
                addContent() {
                    this.$emit('add-comment', this.user, this.content)
                }
            }
        }

        var vm = new Vue({
            el: '#app',
            data: {
                user: '',
                content: '',
                list: [{
                    id: Date.now(),
                    user: '撒贝宁',
                    content: '清华还行'
                }, {
                    id: Date.now(),
                    user: '马云',
                    content: '钱是这个世界上最容易得到的东西'
                }, {
                    id: Date.now(),
                    user: '王健林',
                    content: '先定个小目标，比如说挣它一个亿'
                }]
            },
            methods: {
                /* dataFormat(time) {
                    return `${time.getFullYear()}-${time.getMonth() + 1 >= 10 ? (time.getMonth() + 1) : '0' + (time.getMonth() + 1)}-${time.getDate() >= 10 ? time.getDate() : '0' + time.getDate()}
                     ${time.getHours() >= 10 ? time.getHours() : '0' + time.getHours()} : ${time.getMinutes()>=10?time.getMinutes():'0'+time.getMinutes()} : ${time.getSeconds() >= 10 ? time.getSeconds() : '0' + time.getSeconds()}`;
                } */

                addComment(user, content) {
                    var comment = {
                        id: Date.now(),
                        user: user,
                        content: content
                    }
                    alert(1);
                    alert(JSON.parse(localStorage.getItem('cmts') || '[]'));
                    this.list.push(comment);
                    localStorage.setItem('cmts', JSON.stringify(list));
                    this.user = this.content = '';
                }
            },
            components: {
                inputComp
            }
        });
    </script>
</body>

</html>